// DIY模块地址: https://shop64022682.taobao.com/
const char html_page[] PROGMEM = R"rawliteral(
  <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>滑台控制器</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Arial, "Microsoft YaHei", sans-serif;
      text-align: center;
      background-color: #f5f5f5;
      padding: 5px;
      max-width: 480px;
      margin: 0 auto;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .container {
      max-width: 480px;
      margin: 0 auto;
      padding: 0 5px;
    }
    
    .header {
      padding: 5px 0;
      background-color: #2c3e50;
      color: white;
      border-radius: 10px 10px 0 0;
      margin-bottom: 5px;
    }
    
    .control-group {
      background: white;
      padding: 5px;
      margin-bottom: 5px;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    h1 {
      font-size: 1.5rem;
      margin-bottom: 5px;
    }
    
    h2 {
      font-size: 1.2rem;
      margin-bottom: 10px;
      color: #2c3e50;
    }
    
    .slider-container {
      margin: 15px 0;
    }
    
    .slider {
      width: 100%;
      height: 30px;
    }
    
    .status {
      font-size: 1.1rem;
      margin: 10px 0;
      font-weight: bold;
      color: #3498db;
    }
    
    .button-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 5px;
    }
    
    .button {
	  margin: 1px;
      padding: 12px 15px;
      font-size: 0.8rem;
      cursor: pointer;
      border: none;
      border-radius: 8px;
      background-color: #3498db;
      color: white;
      flex: 1 1 45%;
      max-width: 100px;
      min-width: 60px;
      transition: background-color 0.3s;
    }
    
    .button:hover {
      background-color: #2980b9;
    }
    
    .button:active {
      transform: scale(0.98);
    }
    
    .button.stop {
      background-color: #e74c3c;
    }
    
    .button.stop:hover {
      background-color: #c0392b;
    }
    
    .button.auto {
      background-color: #27ae60;
    }
    
    .button.auto:hover {
      background-color: #219653;
    }
    
    .footer {
      margin-top: auto;
      padding: 10px;
      font-size: 0.8rem;
      color: #7f8c8d;
    }
    
    @media (max-width: 480px) {
      .button {
        flex: 1 1 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>滑台控制器</h1>
    </div>
    
    <div class="control-group">
      <h2>滑块位置 (0mm-60mm)</h2>
      <div class="slider-container">
        <input type="range" min="0" max="60" value="0" class="slider" id="positionSlider">
      </div>
      <p class="status">当前位置: <span id="currentPos">0</span> mm</p>
    </div>
    
    <div class="control-group">
      <div class="button-container">
        <button class="button auto" id="autoBtn">往复运动</button>
        <button class="button" id="fwd10Btn">右进10mm</button>
        <button class="button" id="back10Btn">左进10mm</button>
        <button class="button stop" id="stopBtn">停止</button>
        <button class="button" id="findLeftBtn">检测左限位</button>
        <button class="button" id="findRightBtn">检测右限位</button>
      </div>
    </div>    
    <div class="footer">
	   DIY模块地址: https://shop64022682.taobao.com/
	</div>
    <div class="control-group">
      <h2>步进脉冲频率 (0-1000Hz)</h2>
      <div class="slider-container">
        <input type="range" min="0" max="1000" value="300" class="slider" id="freqSlider">
      </div>
      <p class="status">当前频率: <span id="currentFreq">300</span> Hz</p>
      <div class="button-container">
        <button class="button" id="freq100Btn">100Hz</button>
        <button class="button" id="freq300Btn">300Hz</button>
        <button class="button" id="freq500Btn">500Hz</button>
      </div>
    </div>
    <div class="footer">
	   DIY模块地址: https://shop64022682.taobao.com/
	</div>
    <div class="footer">
      ESP32 滑台控制系统
    </div>
  </div>

  <script>
    // 更新位置显示
    function updatePosition(pos) {
      document.getElementById('currentPos').textContent = pos;
      document.getElementById('positionSlider').value = pos;
    }
    
    // 更新频率显示
    function updateFrequency(freq) {
      document.getElementById('currentFreq').textContent = freq;
      document.getElementById('freqSlider').value = freq;
    }
    
    // 发送控制命令
    function sendCommand(cmd, value = '') {
      var xhr = new XMLHttpRequest();
      var url = '/control?' + cmd;
      if (value !== '') url += '=' + value;
      xhr.open('GET', url, true);
      xhr.send();
    }
    
    // 事件监听
    document.addEventListener('DOMContentLoaded', function() {
      // 滑块位置控制
      var posSlider = document.getElementById('positionSlider');
      posSlider.addEventListener('input', function() {
        sendCommand('position', this.value);
      });
      
      // 按钮控制
      document.getElementById('autoBtn').addEventListener('click', () => sendCommand('auto',1));
      document.getElementById('fwd10Btn').addEventListener('click', () => sendCommand('fwd10',1));
      document.getElementById('back10Btn').addEventListener('click', () => sendCommand('back10',1));
      document.getElementById('stopBtn').addEventListener('click', () => sendCommand('stop',1));
      document.getElementById('findLeftBtn').addEventListener('click', () => sendCommand('findLeft',1));
      document.getElementById('findRightBtn').addEventListener('click', () => sendCommand('findRight',1));
      
      // 频率控制
      var freqSlider = document.getElementById('freqSlider');
      freqSlider.addEventListener('input', function() {
        sendCommand('freq', this.value);
      });
      document.getElementById('freq100Btn').addEventListener('click', () => sendCommand('freq', 100));
      document.getElementById('freq300Btn').addEventListener('click', () => sendCommand('freq', 300));
      document.getElementById('freq500Btn').addEventListener('click', () => sendCommand('freq', 500));
      
      // 初始状态更新
      function updateStatus() {
        fetch('/status')
          .then(response => response.json())
          .then(data => {
            updatePosition(data.position.toFixed(1));
            updateFrequency(data.frequency);
          });
      }
      
      // 每秒更新一次状态
      setInterval(updateStatus, 1000);
      updateStatus(); // 初始更新
    });
  </script>

</body>
</html>
)rawliteral";